<template>
	<div class="x-json" v-if="async">
		<x-line :title="line.name" icon="flaticon-layers" :intro="line.helpBlock">
			<div slot="headerRight" v-if="jsonStyle===1">
				<el-button type="primary" @click="add" size="mini">新增数据</el-button>
			</div>
		</x-line>
		<el-table style="width: 100%" :data="viewModel" :key="tableKey">
			<el-table-column header-align="center" align="center" :prop="head.field" :label="head.name" :width="head.width" v-for="(head,headIndex) in columns" :key="headIndex">
				<template slot-scope="scope" align="center">
					<div v-if="head.type==='decimal'">
						<el-input-number v-model="scope.row[head.field]" @change="change" size="mini" :precision="$ala.baseConfig().step" :step="(1 / Math.pow(10, $ala.baseConfig().step))" controls-position="right"></el-input-number>
					</div>
					<div v-else-if="head.type==='image'">
						<x-select-image v-model="scope.row[head.field]" :cssStyle="screen"></x-select-image>
					</div>
					<div v-else-if="head.type==='imagepreview'">
						<x-preview-image :images="scope.row[head.field]" :cssStyle="screen"></x-preview-image>
					</div>
					<div v-else-if="head.type==='textbox'">
						<el-input v-model="scope.row[head.field]" @change="change" :placeholder="'输入'+head.name" size="mini"></el-input>
					</div>
					<div v-else-if="head.type==='textarea'">
						<el-input type="textarea" v-model="scope.row[head.field]" @change="change" size="large" :placeholder="'输入'+head.name"></el-input>
					</div>
					<div v-else-if="head.type==='dropdownlist' || head.type==='radiobutton'">
						<x-select class="x-json_select" v-model="scope.row[head.field]" size="mini" :apiUrl="head.dataSource"></x-select>
					</div>
					<div v-else-if="head.type==='switch'">
						<el-switch v-model="scope.row[head.field]" size="mini"></el-switch>
					</div>
					<div v-else-if="head.type==='dataselect'">
						<x-data-select v-model="scope.row[head.field]" :tag="scope.row[head.field]" :type="head.dataSource" size="mini"></x-data-select>
					</div>
					<div v-else-if="head.type==='datepicker'">
						<el-date-picker v-model="scope.row[head.field]" value-format="yyyy-MM-dd" size="mini" align="right" :picker-options="pickerOptions"></el-date-picker>
					</div>
					<template v-else-if="head.type == 'numberic'">
						<el-input-number v-model="scope.row[head.field]" @change="change" :min="0" size="mini"></el-input-number>
					</template>
					<div v-else-if="head.type==='hidden'">
						<el-input v-model="scope.row[head.field]" type="hidden"></el-input>
					</div>
					<div v-else-if="head.type==='timerang'">
						<x-select-time v-model="scope.row[head.field]" size="mini"></x-select-time>
					</div>
					<div v-else-if="head.type==='label'">
						{{scope.row[head.field]}}
					</div>
					<div v-else>
						{{scope.row[head.field]}}
					</div>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="120" v-if="jsonStyle===1">
				<template slot-scope="scope">
					<el-button @click.native.prevent="deleteRow(scope.$index)" type="danger" size="mini">
						移除
					</el-button>
				</template>
			</el-table-column>
		</el-table>

	</div>
</template>
<script>
	import convert from './convert.js'
	import ala from 'ala'
	export default {
		model: {
			prop: 'dataModel',
			event: 'change'
		},
		data() {
			return {
				columns: null, // 表格的列 
				keyValueField: null, // keyValue字段，参考会员等级价设置，一个列表中目前仅支持一个
				line: {},
				jsonStyle: 1,
				async: false,
				isInit: false,
				tableKey: 'tableKey',
				viewModel: [],
				screen: {
					width: '50px',
					height: '50px'
				},
				pickerOptions: {
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date())
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date()
							date.setTime(date.getTime() - 3600 * 1000 * 24)
							picker.$emit('pick', date)
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date()
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
							picker.$emit('pick', date)
						}
					}]
				}
			}
		},
		props: {
			widget: {},
			type: {}, // type类型
			formField: {}, // 字段数据设置,type类型同时传一个即可
			dataModel: {}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				this.tableKey = Math.random()
				if (this.formField) {
					this.columns = this.formField
				}
				if (!this.columns && this.type) {
					var jsonForm = await this.$api.uiJsonForm(this.type)
					if (jsonForm) {
						this.columns = jsonForm.jsonFields
					}
				}
				if (this.dataModel) {
					this.viewModel = this.dataModel
				}
				if (this.widget) {
					this.line = this.widget
					this.jsonStyle = this.widget.jsonStyle
				}
				var result = convert.toColumns(this.columns, this.viewModel)
				this.columns = result.columns
				this.keyValueField = result.keyValueField
				this.viewModel = convert.toData(this.viewModel, this.keyValueField)
				this.async = true
			},
			deleteRow(index) {
				this.$confirm('此操作将删除该条数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					})
					this.viewModel.splice(index, 1)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
			},
			async add() {
				if (!this.viewModel) {
					this.viewModel = []
				}
				var type = this.type
				if (!type) {
					type = this.widget.dataSource
				}
				if (type) {
					var result = await this.$api.uiDefaultValue(type)
					if (result) {
						this.viewModel.push(result)
					}
				} else {
					this.$ala.error('type类型为空，不能新增数据')
				}
			},
			// 数据发生变化
			change() {
				if (this.keyValueField) {
					this.viewModel.forEach(r => {
						if (r[this.keyValueField]) {
							r[this.keyValueField].forEach(k => {
								k.value = r[k.name]
							})
						}
					})
				}
			}
		},
		watch: {
			viewModel: {
				deep: true,
				handler(val) {
					if (this.keyValueField) {
						this.tableKey = Math.random()
						this.change()
						this.$forceUpdate()
					}
					this.$emit('change', this.viewModel)
				}
			},
			dataModel: {
				deep: true,
				handler(val) {
					// 解决首次进入时两次加载的问题
					if (this.isInit === true) {
						return
					}
					this.isInit = true
					this.init()
				}
			}
		}
	}
</script>

<style lang="scss" rel="stylesheet/scss">
	.x-json {
		margin-bottom: 15px;

		.el-table {
			overflow: visible;
		}

		.el-table__body-wrapper {
			overflow: visible;
		}

		.cell {
			overflow: visible;
		}

		.x-json_select {
			position: relative;

			.el-select-dropdown {
				position: absolute !important;
				top: 30px !important;
			}

			.el-select-dropdown__item {
				text-align: left;
			}
		}
	}
</style>